<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>2018/12/7</title>
    <script src="vue.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
            user-select: none;
            -webkit-tap-highlight-color: rgba(0,0,0,0);
        }
        .app{
            width: 100vw;
            height: 100vh;
            background: #eee;
        }
        .app-top{
            height: 80px;
            background: #323232;
        }
        .app-top>label,input{
            display: inline-block;
            vertical-align: middle;
        }
        .app-top>label{
            width: 20%;
            line-height: 80px;
            text-align: center;
            color: #fff;
        }
        .app-top>input{
            outline: none;
            width: 70%;
            border: 1px solid #323232;
            height: 38px;
            border-radius: 3px;
            text-indent: 1em;
            font-size: 18px;
            letter-spacing: 1px;
            color: #323232;
        }
        .list-info>span{
            display: inline-block;
            line-height: 50px;
            width: 49%;
        }
        .list-count{
            text-align: right;
        }
        li{
            background: #e2e2e2;
            margin: 1px;
        }
        li>*{
            display: inline-block;
            height: 30px;
        }
        li>input{
            border: none;
            outline: none;
            background: #e2e2e2;
        }

    </style>
</head>
<body>
    <div class="app">
        <app-header @msgchange="msgchange"></app-header>
        <todo-list title="正在进行" :injectmsg.sync="doingInput" @output="doing" ></todo-list>
        <todo-list title="已经完成" :injectmsg.sync="doneInput" @output="done"></todo-list>
    </div>
</body>
<script type="x-template" id="app-top">
    <div class="app-top">
        <label for="todolist-ipt">ToDoList</label>
        <input type="text" v-model="todolistMsg" @keyup.enter="sendMsg" id="todolist-ipt" placeholder="代办事项">
    </div>
</script>
<script type="x-template" id="todo-list">
    <div class="app-list">
        <div class="list-info">
            <span class="list-title">{{title}}</span>
            <span class="list-count">{{todolist.length}}</span>
        </div>
        <ul>
            <li v-for="(item, key) in todolist">
                <span @click="add(key)">+</span>
                <input type="text" v-model="item" readonly="false">
                <span @click="clickToDel(key)">-</span>
            </li>
        </ul>
    </div>
</script>
<script>
    // 子传父 自定义事件
    // 父传子 自定义属性
    Vue.component('app-header', {
        template: '#app-top',
        data() {
            return {
                todolistMsg: ''
            }
        },
        methods: {
            sendMsg() {
                this.$emit('msgchange', this.todolistMsg);
                this.todolistMsg = '';
            }
        }
    }); // new Vue() 简写
    Vue.component('todo-list', {
        template: '#todo-list',
        data() {
            return {
                todolist: []
            }
        },
        methods:{
            clickToDel(index) {
                this.todolist.splice(index, 1);
            },
            add(index) {
                this.$emit('output', this.todolist.splice(index, 1)[0])
            }
        },
        props: ['title', 'injectmsg'],
        watch:{
            injectmsg(){
                this.injectmsg !== '' && this.todolist.push(this.injectmsg);
                this.$emit('update:injectmsg', '')
            }
        }
    });
    let app = new Vue({
        el: '.app',
        data: {
            temp: '',
            doneInput: '',
            doingInput: ''
        },
        methods: {
            msgchange(data) {
                this.temp = data;
            },
            doing(data){
                this.doneInput = data;
            },
            done(data) {
                this.doingInput = data;
            }
        },
        computed: {},
        props: [],
        watch: {
            temp() {
                this.doingInput = this.temp;
            }
        }
    })
</script>
</html>